<script setup lang="ts">
import { App, getApp } from "./models/app";
import Dynamic from "@/components/Dynamic.vue";
import { provide } from "vue";
import { initServices } from "@/services";
import * as injectKeys from "@/services/injectKeys";
import { scalePage } from "@/core/pageAutoScale";

scalePage()


const app = getApp() as App
const services = initServices(app)

provide(injectKeys.sqlAnalyzeKey, services.sqlServices)
provide(injectKeys.componentKey, services.cpServices)
provide(injectKeys.datasetKey, services.datasetServices)
provide(injectKeys.dbKey, services.dbServices)

const isReady = services.dbServices.isReady

</script>

<template>
  <div v-if="!isReady" style="display: flex;height: 100vh;">
    <p style="margin: auto;">加载中</p>
  </div>

  <div v-else class="app-box">
    <Dynamic :component="cp" v-for="cp in app.children"></Dynamic>
  </div>
</template>

<style scoped lang="less">
html {
  font-size: 1.1115vw;
}

.app-box {
  /* max-width: 1280px; */
  height: 100%;
  padding: 2rem;
  margin: 0.8rem auto;



  &>:deep(div) {
    margin-top: 0.8rem;
  }
}
</style>
